<template>
	<div class="historyListDetail" v-loading="hisListDetailLoading">
    <div class="cardBox" v-if="tabsActiveName === 'inspect' ">
      <div class="title">检修内容</div>
      <el-form ref="inspectionForm" :model="curDetail" class="mindForm" size="mini">
        <div class="formItem borderBtm">
          <el-col :span="8">
            <el-form-item label="站点名称:" prop="station" label-width="100px">
              <el-input v-model="curDetail.station"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期:" label-width="60px">
              <el-input v-model="curDetail.gmtOperate"></el-input>            
            </el-form-item>
          </el-col>
        </div>
        <div class="content">
          <div class="formItem shadow">
            <p class="formItemTit">站房环境检查(可多选)</p>
            <el-form-item label="" label-width="35px" style="margin-bottom: 5px;">
              <el-checkbox-group v-model="curDetail.content.stationAmbient" class="greenCheckBox">
                <el-checkbox label="仪器干净整洁" name="type"></el-checkbox>
                <el-checkbox label="门窗正常关闭" name="type"></el-checkbox>
                <el-checkbox label="分析仪器未阳光直射" name="type"></el-checkbox>
                <el-checkbox label="空调" name="type"></el-checkbox>
                <el-checkbox label="站房周围杂草、积水清除" name="type"></el-checkbox>
                <el-checkbox label="防雷设施正常" name="type"></el-checkbox>
                <el-checkbox label="漏雨检查" name="type"></el-checkbox>
                <el-checkbox label="外部设备检查" name="type"></el-checkbox>
                <el-checkbox label="其他" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-col :span="8">
              <el-form-item label="巡检内容及结果" label-width="145px"  class="noBold">
                <el-input v-model="curDetail.content.stationAmbientRes"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作内容" label-width="100px"  class="noBold">
                <el-input v-model="curDetail.content.stationAmbientCnt"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem shadow">
            <p class="formItemTit">仪器与系统检查(可多选)</p>
            <el-form-item label="" label-width="35px" style="margin-bottom: 5px;">
              <el-checkbox-group v-model="curDetail.content.appSystem" class="greenCheckBox">
                <el-checkbox label="多参数在线分析仪" name="type"></el-checkbox>
                <el-checkbox label="采样系统" name="type"></el-checkbox>
                <el-checkbox label="预处理系统" name="type"></el-checkbox>
                <el-checkbox label="质控系统" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <p class="formItemSubtit">巡检内容及结果:</p>
            <el-row style="padding-left: 15px;padding-right: 15px;">
              <el-col :span="6">
                <el-form-item label="运行状态：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemRunState">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供电：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemPower">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="温度：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemTemper">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传感器：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemTemperSensor">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="搅拌电机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemStirMotor">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="空压机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemAirPump">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采水系统：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemWaterExtraction">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工控机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="curDetail.content.appSystemIPC">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="10">
              <el-form-item label="操作内容" label-width="100px">
                <el-input v-model="curDetail.content.appSystemCnt"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem shadow">
            <p class="formItemTit">易损件更换</p>
            <el-row v-for="(item, index) of curDetail.content.vulnerableParts" :key="index">
              <el-col :span="4">
                <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input v-model="item.vulnerablePartsName" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input-number v-model="item.vulnerablePartsNum" :min="0"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input v-model="item.vulnerablePartsModel" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input v-model="item.vulnerablePartsBrand" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
          </div>
          <div class="mindHr"></div>
          <div class="formItem shadow">
            <div class="formItem">
              <p class="formItemTit">耗材更换</p>
              <el-row v-for="(item, index) of curDetail.content.consumablesGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.consumablesName" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.consumablesNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.consumablesModel" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.consumablesBrand" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              
            </div>
            <div class="formItem">
              <p class="formItemTit">试剂更换</p>
              <el-row v-for="(item, index) of curDetail.content.reagentGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.reagentName" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.reagentNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.reagentModel" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.reagentBrand" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="formItem">
              <p class="formItemTit">管路清洗</p>
              <el-row v-for="(item, index) of curDetail.content.pipingGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.pipingName" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.pipingNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.pipingModel" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.pipingBrand" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="formItem">
              <p class="formItemTit">废液外运</p>
              <el-row v-for="(item, index) of curDetail.content.wasteShippingGroup" :key="index">
                <el-col :span="6">
                  <el-form-item :label="'废液名称' + (index > 0 ? index : '')" label-width="100px"  class="noBold">
                    <el-input v-model="item.wasteName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <el-input-number v-model="item.wasteNumber" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'单位' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <el-input v-model="item.wasteUnit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'体积' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <el-input v-model="item.wasteVolume"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="formItem">
              <el-col :span="8">
                <el-form-item label="备注" label-width="70px" style="margin-bottom: 5px;" prop="remark">
                  <el-input type="textarea" :rows="4" v-model="curDetail.remark"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </div>
        </div>
        <br>
        <div class="formItem">
          <el-row>
            <el-col :span="9">
              <el-form-item label="巡检人员" prop="person" label-width="95px">
                <el-input v-model="curDetail.person"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="cardBox" v-if="tabsActiveName === 'maintenance' ">
      <div class="title">检修内容</div>
        <el-form ref="maintenanceForm" :model="curDetail" class="mindForm" label-width="100px" size="mini"
          style="max-width: 650px;"
        >
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="站点名称" prop="station"><param name="" value="">
                <el-input v-model="curDetail.station"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期">
                <el-input v-model="curDetail.gmtOperate"></el-input>   
              </el-form-item>
            </el-col>
          </div>
          <div class="content">
            <div class="formItem">
              <el-col :span="12">
                <el-form-item label="检修仪器名称">
                  <el-input v-model="curDetail.content.deviceName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格型号">
                  <el-input v-model="curDetail.content.modelType"></el-input>
                </el-form-item>
              </el-col>
            </div>
            <el-form-item label="检修类型">
              <el-radio-group v-model="curDetail.content.maintenType">
                <el-radio label="实验室检修"></el-radio>
                <el-radio label="现场检修"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="检修结果">
              <el-input v-model="curDetail.content.OverhaulRes"></el-input>
            </el-form-item>
            <div class="formItem">
              <el-col :span="11">
                <el-form-item label="本次检修时间">
                  <el-date-picker type="date" placeholder="选择日期" v-model="curDetail.content.thisTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="上次检修时间">
                  <el-date-picker type="date" placeholder="选择日期" v-model="curDetail.content.LastTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </div>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="4" v-model="curDetail.remark"></el-input>
          </el-form-item>
          <el-form-item label="检修人员" prop="person">
            <el-input v-model="curDetail.person"></el-input>
          </el-form-item>

        </el-form>
    </div>
    <div class="cardBox" v-if="tabsActiveName === 'repair' ">
      <div class="title">故障内容</div>
        <el-form ref="curDetail" :model="curDetail" class="mindForm" label-width="100px" 
          style="max-width: 650px;" size="mini"
        >
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="站点名称" prop="station">
                <el-select v-model="curDetail.station" placeholder="请选择站点名称">
                  <el-option label="沙江4#" value="沙江4#"></el-option>
                  <el-option label="江碧2#水质监测站" value="江碧2#水质监测站"></el-option>
                  <el-option label="沙井2号泵水质监测站" value="沙井2号泵水质监测站"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="curDetail.date" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="检修仪器名称">
            <el-input v-model="curDetail.content.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input v-model="curDetail.content.modelType"></el-input>
          </el-form-item>
          <el-form-item label="故障原因">
            <el-input type="textarea" :rows="4" v-model="curDetail.content.failureReason" placeholder="输入故障原因"></el-input>
          </el-form-item>
          <el-form-item label="解决措施">
            <el-input type="textarea" :rows="4" v-model="curDetail.content.solutions" placeholder="输入解决措施"></el-input>
          </el-form-item>
          
          <!-- <el-form-item label="更换内容">
            <el-input v-model="curDetail.content.replaceCnt"></el-input>
          </el-form-item>
          <el-form-item label="更换数量">
            <el-input v-model="curDetail.content.replaceNum"></el-input>
          </el-form-item> -->
          <el-row v-for="(item, index) of curDetail.content.replaceGroup" :key="index">
            <el-col :span="24">
              <el-form-item :label="'更换内容' + (index > 0 ? index : '')" label-width="100px">
                <el-input v-model="item.replaceCnt"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="'更换数量' + (index > 0 ? index : '')" label-width="100px">
                <el-input v-model="item.replaceNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="仪器校准">
            <el-checkbox-group v-model="curDetail.content.calibration" class="greenCheckBox">
              <el-checkbox label="标液校准" name="type"></el-checkbox>
              <el-checkbox label="标准曲线" name="type"></el-checkbox>
              <el-checkbox label="精密度检查" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="4" v-model="curDetail.remark" ></el-input>
          </el-form-item>

          <el-form-item label="检修人员" prop="person">
            <el-input v-model="curDetail.person"></el-input>
          </el-form-item>

        </el-form>
    </div>
    <div class="mask"></div>
	</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'historyListDetail',
  data () {
    return {
      msg: 'hello historyListDetail!',
      hisListDetailLoading: false,
      tabsActiveName: '',
		}
  },
	methods: {
    
  },
  created() {
    // debugger
    // if(this.curDetail)
    this.hisListDetailLoading = true
    if(JSON.stringify(this.curDetail) == "{}"){
      this.$router.push('/historyList')
      this.$notify({
        type: 'warning',
        title: '提示',
        message: '参数错误请重新选择',
      })
    }
    this.tabsActiveName = this.curDetail.type
    this.hisListDetailLoading = false
  },
  computed: {
    ...mapGetters({
      curDetail: 'getCurDetail'
    })
  }
}
</script>
<style scoped>
.historyListDetail {
  position: relative;
  min-height: 100%;
  background-color: #fff;
}
.historyListDetail .formTextVal {
  font-weight: 500;
  color: #666;
}
.historyListDetail .mask {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.historyListDetail .title {
  position: relative;
  color: #666;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}
.historyListDetail .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.plotTabs {}
.tabsBox {
  padding: 0 20px 20px 20px;
}

.mindForm {
  font-weight: bold;
}
.mindForm .noBold {
  font-weight: 500;
}
.mindForm .formItem {
  overflow: hidden;
  padding-right: 15px;
  padding-bottom: 15px;
}
.mindForm .formItem.shadow {
  box-shadow: 1px 1px 15px #dcdcdc;
  margin-bottom: 15px;
}

.mindForm .formItem .formItemTit {
  padding-left: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
} 
.mindForm .formItem .formItemSubtit {
  padding-left: 33px;
} 
.mindForm .formItem .formAddBtn {
  margin-left: 15px;
}
.mindForm .borderBtm {
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 15px;
}

.mindForm .mindHr {
  width: 100%;
  height: 1px;
  background: #dcdcdc;
  margin-bottom: 15px;
}
.cardBox {
  padding: 20px;
}
</style>
<style>
.historyListDetail .el-tabs__header .is-top {
  display: none;
}
</style>
